<template>
  <div>
    <el-row>
      <el-col :span='24'>
        <el-menu mode='horizontal'>
          <el-menu-item><router-link to="/">首页</router-link></el-menu-item>
          <el-menu-item><router-link to='/news'>新闻列表</router-link></el-menu-item>
          <el-menu-item><router-link to='/about'>关于我们</router-link></el-menu-item>
        </el-menu>
        <el-divider></el-divider>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-button>测试样式是否生效</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="send">发送一个请求，测试axios是否加载进来</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card title="图表演示区域">
          <div id="main" style="width: 600px;height:400px;"></div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'Home',
  mounted() {
    this.generateChart()
  },
  methods: {
    send () {
      this.$http({
        url: 'http://localhost:3000/getStudentList'
      }).then(res => {
        console.log(res)
      })
    },
    generateChart () {

      // echart已经挂载Vue的原型链上了，直接this调用
      let echartEl = document.querySelector("#main")
      let myChart = this.$echarts.init(echartEl)

      console.log(myChart)
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      };

      myChart.setOption(option)
    }
  }
}
</script>

<style>
</style>